<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>行驶轨迹</title>
	<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <link href="/wx/css/jquery-confirm.min.css" rel="stylesheet">
    <link href="/wx/css/font-awesome.min.css" rel="stylesheet">
    <link href="/wx/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <link href="/wx/css/swiper.min.css" rel="stylesheet">
	<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
	<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="/wx/js/jquery-confirm.min.js"></script>
    <script src="/wx/js/bootstrap-datetimepicker.min.js"></script>
    <script src="/wx/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="/wx/js/common.js"></script>
    <script src="/wx/js/swiper.jquery.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=X4JBZ-VMJKF-3SSJA-JMHTE-KLDKV-DRFIF&libraries=convertor"></script>
    <style type="text/css">
        html,body,section{
            width: 100%;
            height:100%;
        }
        section{
            display: none;
        }
        body{
            background-color: #cccccc;
        }
        .container{
            background-color: #cccccc;
            margin-top: 5px;
        }
        .time-div h4{
            margin-left: 10px;
        }
        .time-div h4 span{
            padding-right: 10px;
        }
        .track-div{
            background-color: #fffff3;
            border-top: 1px solid #cccccc;
            border-bottom: 1px solid #cccccc;
        }
        .track-div h3{
            margin: 15px 10px 15px 10px;
        }
        .track-div h3 span{
            padding: 10px auto 10px auto;
            font-size: 20px;
        }
        .track-div h3 span i{
            margin: 5px auto 10px auto;
        }
        .time-select{
            margin-top: 40px;
            padding-left: 0px;
            padding-right: 0px;
        }

        #map-container{
            width:100%;
            height: 80%;
            margin-top: 0px;
            padding-top: 0px;
        }
        .swiper-container {
            width: 100%;
            height: 20%;
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            padding-top: 15px;
            background: #e0e0e0;
        }
        .track-info p img{
            padding-right: 10px;
        }
        .swiper-button-prev,
        .swiper-button-next{
            height: 20px;
        }

        .loading-mask {
            position: absolute;
            z-index: 1999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.5;
            text-align: center;
            display: block;
        }
        .loading-des {
            margin-top:50px;
            color: #fff;
        }

    </style>
</head>
<body>
  <div class="container" id="track-list-container">
      <div class="row">
          <div class="time-div" id="today-tab">
              <h4>
                  <span>今天<i class="fa fa-clock-o text-danger fa-fw"></i></span>
                  <span></span>
                  <span></span>
              </h4>
          </div>
          <div class="track-div" id="today-content">
              <h3>
                  <span><img height="14" src="/wx/images/track_odo.png"/></span>
                  <span><img height="14" src="/wx/images/track_avg_speed.png"/></span>
                  <span>
                      <img height="14" src="/wx/images/track_score.png"/>
                      <i class="fa fa-angle-right pull-right text-info"></i>
                  </span>
              </h3>
          </div>
          <div class="time-div" id="yesterday-tab">
              <h4>
                  <span>昨天<i class="fa fa-clock-o text-danger fa-fw"></i></span>
                  <span></span>
                  <span></span>
              </h4>
          </div>
          <div class="track-div" id="yesterday-content">
              <h3>
                  <span><img height="14" src="/wx/images/track_odo.png"/></span>
                  <span><img height="14" src="/wx/images/track_avg_speed.png"/></span>
                  <span>
                      <img height="14" src="/wx/images/track_score.png"/>
                      <i class="fa fa-angle-right pull-right text-info"></i>
                  </span>
              </h3>
          </div>
          <div class="time-div" id="day-before-yesterday-tab">
              <h4>
                  <span>前天<i class="fa fa-clock-o text-danger fa-fw"></i></span>
                  <span></span>
                  <span></span>
              </h4>
          </div>
          <div class="track-div" id="day-before-yesterday-content">
              <h3>
                  <span><img height="14" src="/wx/images/track_odo.png"/></span>
                  <span><img height="14" src="/wx/images/track_avg_speed.png"/></span>
                  <span>
                      <img height="14" src="/wx/images/track_score.png"/>
                      <i class="fa fa-angle-right pull-right text-info"></i>
                  </span>
              </h3>
          </div>
          <div class="time-div" id="week-tab">
              <h4>
                  <span>本周<i class="fa fa-clock-o text-danger fa-fw"></i></span>
                  <span></span>
                  <span></span>
              </h4>
          </div>
          <div class="track-div" id="week-content">
              <h3>
                  <span><img height="14" src="/wx/images/track_odo.png"/></span>
                  <span><img height="14" src="/wx/images/track_avg_speed.png"/></span>
                  <span>
                      <img height="14" src="/wx/images/track_score.png"/>
                      <i class="fa fa-angle-right pull-right text-info"></i>
                  </span>
              </h3>
          </div>
      </div>
      <div class="row">
          <form>
              <div class="col col-xs-12">
                  <div class="time-select form-group col col-xs-5">
                      <label class="sr-only" for="startTime">开始时间</label>
                      <div class="input-group">
                          <input type="text" class="form-control" placeholder="开始时间" id="startTime" data-date-format="yyyy-mm-dd" readonly>
                          <div class="input-group-addon" id="startTimeBtn"><span class="fa fa-th"></span></div>
                      </div>
                  </div>
                  <div class="form-group col col-xs-2" style="margin-top: 45px;">
                      <span class="fa fa-2x fa-minus text-info"></span>
                  </div>
                  <div class="time-select form-group col col-xs-5">
                      <label class="sr-only" for="endTime">结束时间</label>
                      <div class="input-group">
                          <input type="text" class="form-control" id="endTime" data-date-format="yyyy-mm-dd" placeholder="结束时间" readonly>
                          <div class="input-group-addon" id="endTimeBtn"><span class="fa fa-th"></span></div>
                      </div>
                  </div>
              </div>
              <div class="form-group text-center" style="padding-left: 0px;padding-right: 0px;">
                  <button type="button" id="search" class="btn btn-primary btn-lg" data-toggle="button" data-loading-text="Loading...">
                      <span class="fa fa-search"></span> 查询
                  </button>
              </div>
          </form>
      </div>
  </div>
  <section>
      <div id="map-container"></div>
      <div class="swiper-container" id="date-track">
          <div class="swiper-wrapper"></div>
          <div class="swiper-button-prev swiper-button-prev-date"></div>
          <div class="swiper-button-next swiper-button-next-date"></div>
      </div>
      <div class="swiper-container" id="single-track">
          <div class="swiper-wrapper"></div>
          <div class="swiper-button-prev swiper-button-prev-single"></div>
          <div class="swiper-button-next swiper-button-next-single"></div>
      </div>
  </section>
  <div class="loading-mask" id="matte">
      <p class="loading-des">正在加载中...</p>
  </div>
  <script src="/wx/js/tracks.js"></script>
  <script type="text/javascript">
  	init('${deviceId}');
  </script>
</body>
</html>